{% macro pagination(pagination) %}
  {% set paginationData = pagination.getPaginationData %}
  {% set pageCount = paginationData['pageCount'] %}
  {% set last = paginationData['last'] %}
  {% set current = paginationData['current'] %}
  {% set numItemsPerPage = paginationData['numItemsPerPage'] %}
  {% set first = paginationData['first'] %}
  {% set totalCount = paginationData['totalCount'] %}
  {% set pageRange = paginationData['pageRange'] %}
  {% set startPage = paginationData['startPage'] %}
  {% set endPage = paginationData['endPage'] %}
  {% set previous = if_set(paginationData, 'previous', 0) %}
  {% set next =if_set(paginationData, 'next', 0) %}
  {% set pagesInRange = paginationData['pagesInRange'] %}
  {% set firstPageInRange = paginationData['firstPageInRange'] %}
  {% set lastPageInRange = paginationData['lastPageInRange'] %}
  {% set currentItemCount = paginationData['currentItemCount'] %}
  {% set firstItemNumber = paginationData['firstItemNumber'] %}
  {% set lastItemNumber = paginationData['lastItemNumber'] %}
  {% set route = pagination.getRoute %}
  {% set pageParameterName = pagination.getPaginatorOption('pageParameterName') %}
  {% set query = pagination.getQuery %}

  {% if pageCount > 1 %}
  <ul class="pagination ">
  {% if previous >0 %}
    <li class="page-item">
    <a class="page-link" href="{{ path(route, query|merge({(pageParameterName): previous})) }}" tabindex="-1" aria-disabled="true">
      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M15 6l-6 6l6 6"></path></svg>
    </a>
    </li>
  {% else %}
    <li class="page-item disabled">
    <a class="page-link" href="javascript:;" tabindex="-1" aria-disabled="true">
      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M15 6l-6 6l6 6"></path></svg>
    </a>
    </li>
  {% endif %}

    {% if startPage > 1 %}
      <li class="page-item"><a class="page-link" href="{{ path(route, query|merge({(pageParameterName): 1})) }}">1</a></li>
      {% if startPage == 3 %}
            <li class="page-item"><a class="page-link" href="{{ path(route, query|merge({(pageParameterName): 2})) }}">2</a></li>
      {% elseif startPage != 2 %}
                  <li class="page-item"><a class="page-link" href="javascript:;">&hellip;</a></li>
      {% endif %}
    {% endif %}

    {% for page in pagesInRange %}
      {% if page != current %}
        <li class="page-item"><a class="page-link" href="{{ path(route, query|merge({(pageParameterName): page})) }}">{{ page }}</a></li>
      {% else %}
      <li class="page-item active"><a class="page-link" href="javascript:;">{{ page }}</a></li>
      {% endif %}
    {% endfor %}

    {% if pageCount > endPage %}
      {% if pageCount > (endPage + 1) %}
        {% if pageCount > (endPage + 2) %}
          <li class="page-item">…</li>
        {% else %}
            <li class="page-item"><a class="page-link" href="{{ path(route, query|merge({(pageParameterName): pageCount - 1})) }}">{{ pageCount - 1 }}</a></li>
        {% endif %}
      {% endif %}
      <li class="page-item"><a class="page-link" href="{{ path(route, query|merge({(pageParameterName): pageCount})) }}">{{ pageCount}}</a></li>
    {% endif %}


    {% if next >0 %}
    <li class="page-item">
<a class="page-link" href="{{ path(route, query|merge({(pageParameterName): next})) }}">
  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M9 6l6 6l-6 6"></path></svg>
</a>
</li>
    {% else %}
        <li class="page-item disabled">
<a class="page-link" href="javascript:;">
  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M9 6l6 6l-6 6"></path></svg>
</a>
</li>
    {% endif %}
  </ul>
  {% endif %}
{% endmacro %}
